<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cms测试</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jsencrypt/3.0.0-beta.1/jsencrypt.js"></script>
</head>
<style>
    .file-box {
        position: relative;
        display: inline-block;
        width: 500px;
        height: 500px;
    }

    .file-box img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        position: absolute;
        top: -30px;
        left: 0;
        display: inline-block;
        border: none;
    }

    .file-box .txt,
    .file-box .file {
        width: 170px;
        height: 36px;
        position: absolute;
        top: -20px;
        left: 100px;
        text-align: center;
    }

    .box-main {
        width: 1000px;
        height: 500px;
        display: flex
    }

    .box-main>input {
        margin: 20px;
    }

    .box-main>button {
        margin: 20px;
        background-color: aquamarine;
    }

    .box-main>img {
        margin: 20px;
    }
</style>

<body>
    <img id="preview" style="width: 500px;height: 300px;background-color: cadetblue;" />
    <img id="preview1" style="width: 500px;height: 300px;background-color: #cacaca;"
        src="http://ishing.natapp1.cc/zq-manager/product/pic/getImage" />
    <div class="box-main">

        <!-- <input type="text" id="imgfield" class="txt" placeholder="预览"> -->
        <br>
        <input type="file" name="file" id="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
            onchange="imgPreview(this)">

        <button style="width: 80px;height: 30px;" onclick="upload()" value="上传">上传</button>

        <button style="width: 80px;height: 30px;" onclick="download()" value="上传">下载图片</button>

        <input style="width: 80px;height: 30px;" id="picName" value="case_c5cf34c8-1335-4b44-ad7f-7133bbfb5fb8.jpg" />
        <button style="width: 80px;height: 30px;" onclick="deleteFile()" value="上传">删除图片</button>
    </div>


</body>
<script>
    var token =
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI0NzJlYjczNGYzOWU0NWRkNzMwYTE1ODk1MDczMTIzODkiLCJ1c2VybmFtZSI6IjE1NTEzNjY5MjkyIn0.c76HAWlhmqD3pL94a62hpvcA-k-3SqeXrFmcCYqCGm8"

    function upload(params) {
        var formData = new FormData();
        formData.append('file', $('#input_file')[0].files[0]); //添加图片信息的参数
        formData.append('productId', 123); //添加其他参数
        formData.append('test', 3333); //添加其他参数
        $.ajax({
            headers: {
                "token": token //此处放置请求到的用户token
            },
            url: 'http://127.0.0.1:6915/api/comPictureUpload',
            // url: 'http://ishing.natapp1.cc/zq-manager/product/pic/photoUpload',
            type: 'POST',
            cache: false, //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                console.log(data)
                // var blob = this.response;
                var img = document.getElementById("preview1");
                img.onload = function (e) {
                    window.URL.revokeObjectURL(img.src);
                };
                img.src = data.data.name
                // document.body.appendChild(img);

            },
            error: function (data) {
                console.info(data)
                alert("上传失败" + data);
            }
        });

    }

    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = document.getElementById("preview");
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    function download() {

        var xmlhttp;
        xmlhttp = new XMLHttpRequest();

        xmlhttp.open("GET", "http://ishing.natapp1.cc/zq-manager/product/pic/getImage", true);
        xmlhttp.setRequestHeader("token", token);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function () {
            console.log(this);
            if (this.status == 200) {
                var blob = this.response;
                var img = document.getElementById("preview1");
                img.onload = function (e) {
                    window.URL.revokeObjectURL(img.src);
                };
                img.src = window.URL.createObjectURL(blob);
                // document.body.appendChild(img);
            }
        }
        xmlhttp.send();
        // var formData = new FormData();
        // $.ajax({
        //     headers: {
        //         "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI0OGEwOWViMmVkZGYwODdiODIyMDE1ODk0NDE4ODY3NDkiLCJ1c2VybmFtZSI6IjE1NTEzNjY5MjkxIn0._d9UBzH010QSJejE9ZwYnf6yHp2kHihRoGtrNnYD3e4" //此处放置请求到的用户token
        //     },
        //     url: 'http://ishing.natapp1.cc/zq-manager/product/pic/getImage',
        //     type: 'POST',
        //     cache: false, //上传文件不需要缓存
        //     data: formData,
        //     processData: false, // 告诉jQuery不要去处理发送的数据
        //     contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        //     success: function (data) {
        //         console.info(data)
        //         // var rs = eval("(" + data + ")");
        //         // if (rs.state == 1) {
        //         //     alert('上传成功！');
        //         // } else {
        //         //     alert(rs.msg);
        //         // }
        //     },
        //     error: function (data) {
        //         console.info(data)
        //         alert("上传失败"+data);
        //     }
        // });

    }

    /**
     * 
     **/
    //公钥
    var PUBLIC_KEY = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8HMr2CBpoZPm3t9tCVlrKtTmI4jNJc7/HhxjIEiDjC8czP4PV+44LjXvLYcSV0fwi6nE4LH2c5PBPEnPfqp0g8TZeX+bYGvd70cXee9d8wHgBqi4k0J0X33c0ZnW7JruftPyvJo9OelYSofBXQTcwI+3uIl/YvrgQRv6A5mW01QIDAQAB`;
    //私钥
    var PRIVATE_KEY =
        'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBALwcyvYIGmhk+be320JWWsq1OYjiM0lzv8eHGMgSIOMLxzM/g9X7jguNe8thxJXR/CLqcTgsfZzk8E8Sc9+qnSDxNl5f5tga93vRxd5713zAeAGqLiTQnRffdzRmdbsmu5+0/K8mj056VhKh8FdBNzAj7e4iX9i+uBBG/oDmZbTVAgMBAAECgYEAmgNU5NTDkj9B+Pnt6UU8doSjw3+3j+bV2K2yS3QUOvAUus/Ax7x6ktjWxzCXvDY9IfUil2RNv9vtKEAqYLCWjc+lf8PV/yH1b7NEgyeAPBXtAJRoOnmYL2bdPW92kP9KgxJruF6Dz/C5AmMOncsvq8ABD+9Darn4p8dwj2ZC4O0CQQDf/AHmZsQokEItfCy4mHS9UbxbfIhEUv1ApPh/+Sr7NkJkHWYCtBQo+8jKO6zurAZQgWBPD1XX2UE4R+VIiZazAkEA1wAqtMvGhccyRZr+6kpkpDIa8+9jOE+nGUzqTDvgCID6as8AzOONFVVK6m/UUqkhcJ8Qu1pF36BGojy5BX2KVwJBAJSFpbji0hXXupowqfLp3RcgmNbNWAp+QUJZYhJx5cdYbmO2fssyH+AhPT6knYJR/YnqkDM8hv6vKCkqu2YDHjMCQAOA8TE5EOclM+CGghj3VWSHnIDVKdzFD4gOBNNxNlltIKeU8AJmwunSFgJ0CBXAw9a+ANvMwM7AIeaK7sj0HskCQAvxfDCq7gaNx+pfu0FHG8Gix08A/A6foggBl1fVu+L9sr9ZuOQ3HbXnl28F9ewuB9xdjnLUDjp7W7U0pB+vKoQ=';


    function deleteFile(params) {
        var formData = new FormData();
        formData.append('picName', $('#picName').val()); //添加其他参数

        //使用公钥加密
        //使用 公钥 加密
        var fnencrypt = (password) => {
            let encryptor = new JSEncrypt(); // JSEncrypt对象
            encryptor.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
             let rsaPassWord = encryptor.encrypt(password); // 密码进行加密
            return rsaPassWord;
        };
        var str = {
            "picName": $('#picName').val()
        }
        var encrypted = fnencrypt("JSON.stringify(str)");
        console.log('加密前数据:%o', str);
        console.log('加密后数据:%o', encrypted);


        $.ajax({
            headers: {
                "token": token //此处放置请求到的用户token
            },
            url: `http://ishing.natapp1.cc/zq-manager/product/pic/removePic?para=${encrypted}`,
            type: 'POST',
            cache: false, //上传文件不需要缓存
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                console.log(data)

            },
            error: function (data) {
                console.info(data)
                alert("del失败" + data);
            }
        });
    }
</script>

</html>